<template>
  <div>
    <el-table :data="listData.conf" v-loading.body="listLoading" @sort-change="sortlist" size="mini" stripe border fit highlight-current-row>
      <el-table-column type="index" label='编号' width="60"></el-table-column>
      <el-table-column prop="pay_method" label='到账方式' width="100">
        <template slot-scope="scope">{{PayMethodType[scope.row.pay_method]}}</template>
      </el-table-column>
      <!--<el-table-column prop="pay_type" label='分类' width="100"></el-table-column>-->
      <el-table-column prop="pay_type" label='支付类别' width="100">
        <template slot-scope="scope">{{payType[scope.row.pay_type]}}</template>
      </el-table-column>
      <el-table-column prop="name" label='支付名称' width="100"></el-table-column>
      <el-table-column prop="receipt_method" label='收款方式' width="100">
        <template slot-scope="scope">{{RecepiptMethodType[scope.row.receipt_method]}}</template>
      </el-table-column>
      <el-table-column prop="im_amount_tip" label='询问支付金额' width="100"></el-table-column>
      <!--<el-table-column prop="api_key" label='下发提单页面' width="100"></el-table-column>-->
      <el-table-column prop="im_pay_tip" label='下发收款账号' width="100"></el-table-column>
      <el-table-column prop="im_pay_success_tip" label='成功充值自动回复' min-width="300"></el-table-column>
      <el-table-column prop="page_top_tip" label='收款页面顶部提示' min-width="200"></el-table-column>
      <el-table-column prop="page_bottom_tip" label='收款页面温馨提' min-width="200"></el-table-column>
      <el-table-column label="操作" width="100" fixed="right">
        <template slot-scope="scope">
          <div>
            <el-button type="primary" size="mini" @click="update(scope.row)">编辑</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <save-update  v-if="showUpdate" :showUpdate.sync="showUpdate" :id="show_id" :Detail="Detail"></save-update>
  </div>
</template>

<script>
  import saveUpdate from './saveUpdate'
  import { getReceiptConfList } from '@/api'
  export default {
    components: {saveUpdate},
    data() {
      return {
        listData: {},
        Detail: {},
        q: {page_size: 30, page_no: 1},
        listLoading: false,
        showUpdate: false,
        settleCycle: this.$store.state.app.settleCycle,
        show_id: null,
        PayMethodType: this.$store.state.app.PayMethodType,
        payType: this.$store.state.app.payType,
        RecepiptMethodType: this.$store.state.app.RecepiptMethodType,
      }
    },
    activated(){
      this.getList()
    },
    deactivated(){
      this.listLoading = false
    },
    methods: {
      add(){
        this.show_id = null
        this.showUpdate = true
      },
      update(row){
        this.show_id = row.id
        let {im_amount_tip, im_pay_tip, im_pay_success_tip, page_top_tip, page_bottom_tip} = row
        this.Detail = {im_amount_tip, im_pay_tip, im_pay_success_tip, page_top_tip, page_bottom_tip}
        this.showUpdate = true
      },
      query(){
        this.q = Object.assign(this.q, {page_no: 1, page_size: 30})
        this.getList()
      },
      reload() {
        this.q = {page_size: 30, page_no: 1}
        this.getList()
      },
      sortlist(sort){
        this.q.$orderby = sort.prop
        this.getList()
      },
      handleSizeChange (val) {
        this.q.page_size = val
        this.getList()
      },
      handleCurrentChange (val) {
        this.q.page_no = val
        this.getList()
      },
      getList(){
        getReceiptConfList(this.q).then(res => {
          if(res.status === 0){
            this.listLoading = false
            this.listData = res.data
          }
        })
      }
    },
    watch: {
      showUpdate() {
        if(!this.showUpdate){
          this.getList()
        }
      }
    }
  }
</script>
